<template>
    <div class="order-detail">
        <van-nav-bar title="确认订单" left-arrow @click-left="backUp"></van-nav-bar>
        <!-- <div class="cart-goods" v-for="item in cartList" :key="item.goods_id"> -->
        <div class="cart-goods-item">
            <!-- <div class="pd-images">
                      <img :src="item.goods_cover" alt />
            </div>-->
            <div class="pd-info">
                <div class="pd-title">{{levelInfo.name}}</div>
                <!-- <div class="pd-sku">
                            <p class="sku-info">{{item.goods_attr}}</p>
                </div>-->
                <div class="pd-price">
                    <div class="total">
                        <span>&yen;</span>
                        {{levelInfo.price}}
                    </div>
                    <span class="num">×1</span>
                </div>
            </div>
        </div>
        <!-- </div> -->
        <div class="order-fee">
            <p>总计:</p>
            <span>￥{{levelInfo.price}}</span>
        </div>
        <div class="btns">
            <van-button  type="info" size="large" style="margin-bottom:20px;" @click="orderConfirm">提交订单</van-button>
            <!--      <van-button type="primary" size="large" style="margin-bottom:20px;">微信支付</van-button>-->
<!--            <van-button type="warning" size="large" @click="orderConfirm">线下结算</van-button>-->
        </div>
    </div>
</template>
<script>
    import {SubmitBar, Toast, Button} from "vant";
    import api from "@/utils/restful";
    import axios from "axios";

    export default {
        name: "vipconfirm",
        components: {
            [SubmitBar.name]: SubmitBar,
            [Toast.name]: Toast,
            [Button.name]: Button
        },
        data() {
            return {
                // address: {},
                good: {},
                levelInfo: {},
                memberInfo: {},
                price: 0,
                levelName: "",
                orderInfo:{}
            };
        },
        mounted() {
            this.levelInfo = JSON.parse(this.$route.query.levelInfo);
            this.getMemberInfo();
        },
        methods: {
            goto(name) {
                if (name == "addresslist") {
                    this.$router.push({name: name, query: {type: 1}});
                } else {
                    this.$router.push({name: name});
                }
            },
            orderConfirm() {
                this.$axios({
                    method: "post",
                    url: api.conventionOrderCreate,
                    params: {
                        token: localStorage.getItem("token"),
                        orderType: 1,
                        levelId: this.levelInfo.levelId,
                        entrance: 2
                    }
                }).then(res => {
                    if (res) {
                        this.$toast(res.msg);
                        this.orderInfo.orderNo = res.data.orderNo;
                        this.orderInfo.paymentPrice = res.data.paymentPrice;
                        this.orderInfo.returnUrl = "levelorder";
                        this.$router.push({
                            name: "OnlinePay",
                            params: {orderInfo: this.orderInfo}
                        });
                    }

                });
            },

            getMemberInfo() {
                this.$axios({
                    method: "get",
                    url: api.memberInfo,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(this.levelInfo);
                    this.memberInfo = res;
                    this.price = this.levelInfo.price;
                    this.levelName = this.levelInfo.name;
                });
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .order-detail {
        .flexbox(flex-start, space-between, column, wrap);
        min-height: 100vh;
        background-color: @borderColor;

        .contact {
            margin-bottom: 10px;
            margin-top: 1px;
            position: relative;
            height: 80px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            background-color: #fff;
            z-index: 999 l;

            &::after {
                .underline();
            }

            .van-icon-location {
                color: @secColor;
                .font-dpr(24px);
                margin-right: 15px;
            }

            .contact-info {
                background-color: #fff;
                flex: 1;
                .font-dpr(14px);
                font-weight: 300;
                color: @fontColorP;

                .contact-name {
                    .font-dpr(15px);
                    font-weight: normal;
                    margin-right: 20px;
                    font-weight: 600;
                }

                .contact-address {
                    .font-dpr(12px);
                    .textoverflow();
                }
            }
        }

        .cart-goods-item {
            background-color: #fff;
            padding: 10px 15px;
            // .flexbox(flex-start, center, row, nowrap);
            // justify-content: space-between;
            &:last-child {
                border-bottom: none;
            }

            .order-info {
                border: 1px solid red;
                position: relative;
                margin-top: 10px;
                padding: 17px 25px;
                color: @fontColorH3;
                .font-dpr(14px);
                font-weight: normal;
                background-color: #fff;

                &::after {
                    position: absolute;
                    content: "";
                    display: block;
                    width: 3px;
                    height: 14px;
                    left: 15px;
                    top: 21px;
                    background-color: @priColor;
                }

                p {
                    .font-dpr(12px);
                    color: @fontColorP;
                    font-weight: 300;
                    margin-top: 12px;
                }
            }

            .pd-images {
                border: 1px solid @borderColor;
                // border: 1px solid #f0f;

                margin: 0 15px 0 5px;
                flex: 1;
                // max-width: 100px;
                img {
                    width: 90px;
                    height: 60px;
                }
            }

            .pd-info {
                flex: 3;
                // .flexbox(flex-start, space-between, column, wrap);
                -width: 68% !important;
                // flex: initial;
                // border: 1px solid blue;

                .pd-title {
                    position: relative;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    /* autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;

                    max-width: 100%;
                    .font-dpr(12px);
                    color: @fontColorH3;
                }

                .pd-sku {
                    padding: 5px 0;
                    line-height: 1.5;
                    .font-dpr(11px);
                    color: @tipColor;
                }

                .pd-price {
                    margin-top: 10px;

                    .total {
                        .font-dpr(14px);
                        color: @secColor;
                    }

                    .flexbox(space-between, center, row, nowrap);
                    flex: initial;

                    /deep/ .van-stepper {
                        // z-index: 999;
                        .flexbox(space-between, center, row, nowrap);
                        flex: initial;
                        border-radius: 2px;
                        // border: 1px solid #f0f;
                        max-height: 16px;
                        width: 2rem;

                        .van-stepper__minus,
                        .van-stepper__plus {
                            border: none;
                            max-height: 16px;
                            background-color: @bgColor;
                        }

                        .van-stepper__input {
                            border: 1px solid @borderColor;
                            // border: 1px solid #f00;
                            max-height: 16px;
                            background-color: @bgColor;
                            // border: none;
                            outline: none;
                            text-align: center;
                            padding: 0;
                            min-width: 40%;
                            .font-dpr(11px);
                        }

                        .van-stepper__minus--disabled {
                            background-color: @bgColor;
                        }
                    }
                }

                .num {
                    .font-dpr(12px);
                }
            }

            .van-checkbox {
                // border: 1px solid @fontColorH3;
                position: absolute;
                left: 0;
            }
        }

        .order-fee {
            // border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 0 15px;
            .font-dpr(14px);
            line-height: 46px;
            margin: 2px 0;
        }

        .btns {
            padding: 100px 20px;
        }
    }
</style>